<template>
  <div style="height: 100vh; overflow-y: auto;">
    <h2>文章管理</h2>
    <el-input
        placeholder="搜索标题"
        v-model="searchdata"
        @change="$emit('searchArticles')"
        style="margin-bottom: 20px;"
    />
    <el-button type="primary" @click="showsearch">搜索</el-button>
    <el-pagination
        @current-change="handlePageChange"
        :page-size="pageSize"
        :total="totalPosts"
        layout="total, prev, pager, next, jumper">
    </el-pagination>

    <el-table :data="sortedPosts" style="width: 100%">
      <el-table-column prop="id" label="ID" width="50"></el-table-column>
      <el-table-column prop="title" label="标题" sortable @sort-change="handleSortChange">
        <template #default="scope">
          <el-input
              size="small"
              v-model="scope.row.title"
              placeholder="请输入标题"
              @blur="$emit('updateField', 'title', scope.row.id, scope.row.title)"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="publishDate" label="发布时间" sortable @sort-change="handleSortChange">
        <template #default="scope">
          <el-input
              size="small"
              v-model="scope.row.publishDate"
              placeholder="YYYY-MM-DD"
              @blur="$emit('updateField', 'publishDate', scope.row.id, scope.row.publishDate)"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="likes" label="点赞数" sortable @sort-change="handleSortChange">
        <template #default="scope">
          <el-input
              type="number"
              size="small"
              v-model="scope.row.likes"
              placeholder="请输入点赞数"
              @blur="$emit('updateField', 'likes', scope.row.id, scope.row.likes)"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="comments" label="评论数" sortable @sort-change="handleSortChange">
        <template #default="scope">
          <el-input
              type="number"
              size="small"
              v-model="scope.row.comments"
              placeholder="请输入评论数"
              @blur="$emit('updateField', 'comments', scope.row.id, scope.row.comments)"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="views" label="浏览次数" sortable @sort-change="handleSortChange">
        <template #default="scope">
          <el-input
              type="number"
              size="small"
              v-model="scope.row.views"
              placeholder="请输入浏览次数"
              @blur="$emit('updateField', 'views', scope.row.id, scope.row.views)"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="payType" label="支付类型" sortable @sort-change="handleSortChange">
        <template #default="scope">
          <el-select
              v-model="scope.row.payType"
              placeholder="选择支付类型"
              @change="$emit('updateField', 'payType', scope.row.id, scope.row.payType)">
            <el-option label="隐藏" value="1"></el-option>
            <el-option label="免费" value="2"></el-option>
            <el-option label="会员" value="3"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="level_limit" label="阅读等级限制" sortable @sort-change="handleSortChange">
        <template #default="scope">
          <el-input
              type="number"
              size="small"
              v-model="scope.row.level_limit"
              placeholder="请输入限制等级"
              @blur="$emit('updateField', 'level_limit', scope.row.id, scope.row.level_limit)"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="imageSrc" label="图片数量" sortable @sort-change="handleSortChange">
        <template #default="scope">
          <el-input
              type="number"
              size="small"
              v-model="scope.row.imageSrc"
              placeholder="图片显示数量"
              @blur="$emit('updateField', 'imageSrc', scope.row.id, scope.row.imageSrc)"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="is_show" label="是否显示" sortable @sort-change="handleSortChange">
        <template #default="scope">
          <el-switch
              v-model="scope.row.is_show"
              @change="$emit('updateField', 'is_show', scope.row.id, scope.row.is_show)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="isTop" label="是否置顶" sortable @sort-change="handleSortChange">
        <template #default="scope">
          <el-switch
              v-model="scope.row.isTop"
              @change="$emit('updateField', 'isTop', scope.row.id, scope.row.isTop)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="is_slider" label="是否轮播" sortable @sort-change="handleSortChange">
        <template #default="scope">
          <el-switch
              v-model="scope.row.is_slider"
              @change="$emit('updateField', 'is_slider', scope.row.id, scope.row.is_slider)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button @click="$emit('deleteArticle', scope.row.id)" type="text" style="color: red">删除</el-button>
          <a type="text" :href="scope.row.link">详情</a>
        </template>
      </el-table-column>

    </el-table>

    <!-- 底部占位元素 -->
    <div ref="loadMoreTrigger" style="height: 20px;"></div>
  </div>
</template>

<script>
import api from "@/api/api.js";

export default {
  props: {
    posts: {
      type: Array,
      required: true
    },
    searchQuery: {
      type: String,
      default: ''
    },
    loading: {
      type: Boolean,
      default: false
    },
    totalPosts: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      posts_data: [],
      totalPosts: null,
      searchdata: '',
      sortColumn: '',
      sortOrder: '',
      currentPage: 1,         // 当前页码
      pageSize: 10            // 每页显示的数量
    };
  },
  computed: {
    sortedPosts() {
      let sorted = [...this.posts_data];

      for (let key in sorted) {
        sorted[key].link = '/detail/' + sorted[key].id;
      }
      if (this.sortColumn) {
        sorted.sort((a, b) => {
          if (this.sortOrder === 'ascending') {
            return a[this.sortColumn] > b[this.sortColumn] ? 1 : -1;
          } else {
            return a[this.sortColumn] < b[this.sortColumn] ? 1 : -1;
          }
        });
      }
      return sorted;
    }
  },
  mounted() {
    this.initLoad(); // 加载数据
  },
  methods: {
    showsearch() {
      console.log(this.searchdata);
      api.get('/admin/search', {
        params: {'title': this.searchdata}
      }).then(response => {
        console.log(response.data);
        if (response.data.code === 0) {
          this.posts_data = response.data.data.data; // 更新搜索结果
          this.totalPosts = response.data.data.total; // 更新文章总数

          console.log(this.search);
          this.currentPage = 1;
        }
      }).catch(error => {
        console.error("请求出现错误:", error); // 处理错误
      });
    },

    handleSearch() {
      console.log(this.searchdata);
    },
    async handlePageChange(page) {
      this.currentPage = page; // 更新当前页码
      await this.loadData(); // 请求当前页的数据
    },
    handleSortChange({column, prop, order}) {
      this.sortColumn = prop;
      this.sortOrder = order;
    },
    async initLoad() {
      this.currentPage = 1; // 重置为第一页
      await this.loadData(); // 加载数据
    },
    async loadData() {
      const response = await api.get('/admin/posts', {
        params: {page: this.currentPage, size: this.pageSize}
      });
      console.log(response.data);
      if (response.data.code === 0) {
        this.posts_data = response.data.data.data; // 更新文章总数
        this.totalPosts = response.data.data.total; // 更新文章总数
        console.log(this.posts_data);
      }
    }
  }
};
</script>

<style scoped>
/* 添加需要的样式 */
</style>
